<template>
  <div>
    
    <div class="banner" @click="btn">    
      <img :src="imgText.bannerImg" alt="">
      <div class="banner-info">
        <p class="banner-title">{{imgText.sightName}}</p>
        <p class="banner-number"><span class="iconfont">&#xe8ba;</span>15</p>
      </div>
    </div>

    <Fade>    
      <Gallart v-show="showss" :imgs="imgs" @handleBtn="handleBtns" />
    </Fade>

    <div class="banner-information">
      <!-- 地址 & 开放时间 -->
      <div class="banner-address-time" v-for="(item, index) in imgTextObj" :key="item._id">
        <span class="left iconfont" v-if="item._id === 0">&#xe600;</span>
        <span class="left iconfont" v-else>&#xe8ba;</span>

        <div class="font-text">{{item.textStr}}</div>
        <span class="right iconfont">&#xe624;</span>

        <div :class="item._id === 0 ? 'banner-border-box' : ''"></div>
      </div>
      
      <!-- 评论 -->
      <div class="banner-evaluation">
        <div class="banner-score">
          <span class="banner-score-one iconfont">&#xe610;</span>
          <span class="banner-score-two iconfont" v-for="(item, index) in scoreFunt" :key="index">&#xe602;</span>          
          <span class="banner-score-text">{{information.evaluation.score}}</span>
        </div>

        <div class="banner-comments">
          {{information.evaluation.comments}}评论
          <span class="right iconfont">&#xe624;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Gallart from "common/gallary/Gallary.vue";
import Fade from "common/fade/Fade.vue";

export default {
  name: "banner",
  props: ["imgText"],
  data() {
    return {
      showss: false,
      imgs: this.imgText.gallaryImgs,
      information: this.imgText.information,
      imgTextObj: {},
    }
  },
  beforeMount() {
    Object.keys(this.information).slice(0, 2).forEach((item, index) => {      
      this.imgTextObj[item] = {
        textStr: this.information[item],
        _id: index,
      }
    });
  },
  computed: {
    scoreFunt() {
      return parseInt(this.information.evaluation.score);
    }
  },
  methods: {
    btn() {
      this.showss = true;
    },
    handleBtns() {
      this.showss = false;
    }
  },
  components: {
    Gallart: Gallart,
    Fade: Fade,
  },
}
</script>

<style scoped>
  .banner-information .banner-evaluation {
    margin: 10px 0px;
    background-color: #fff;

    display: flex;
    justify-content:space-between;
    padding: 10px 5px;

    box-sizing: border-box;
  }
  /* .banner-information .banner-score {
    background-color: gray;
  } */
  .banner-information .banner-score .banner-score-one {
    color: rgb(82, 203, 163);
    margin-right: 10px;
  }
  .banner-information .banner-score .banner-score-two {
    color: rgb(211, 211, 0);
    font-size: 10px;

    margin: 2.5px;
  }
  .banner-information .banner-score .banner-score-text {
    margin-left: 10px;
    font-weight: 700;
    color: rgb(211, 211, 0);
  }
  .banner-information .banner-comments {
    /* background-color: forestgreen; */
    color:#666;
    font-size: 10px;
    padding-right: 16px;
    position: relative;
    line-height: 16px;
  }

  .banner-information .banner-comments .right{
    font-size: 10px;
    color: #666;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%) rotateY(180deg);
  }


  .banner {
    overflow: hidden;

    width: 100%;    

    position: relative;
  }
  .banner img {    
    width: 100%;    
  }
  .banner .banner-info {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    
    color: #fff;
    line-height: 30px;
    
    display: flex; 
  }
  .banner .banner-info .banner-title {
    flex: 1;
    font-size: 16px;
    padding: 0px 10px;
  }
  .banner .banner-info .banner-number {    
    height: 16px;
    background: rgba(0, 0, 0, .8);

    margin-top: 7px;
    margin-right: 5px;
    padding: 1px 13px;

    line-height: 16px;
    border-radius: 10px;    
    font-size: 12px;
  }
  .banner .banner-info .iconfont {
    font-size: 12px;
  }
  
  /* 2022/5/25 新添加 地址 */
  .banner-information {
    background: rgb(238, 238, 238);
    overflow: hidden;
  }
  .banner-information .banner-address-time {
    font-size: 14px;
    font-weight: 700;

    color: rgb(79, 79, 79);
    background-color: #fff;

    position: relative;
  }
  .banner-information .banner-address-time .left {
    font-size: 16px;
    color: rgb(181, 181, 181);
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
  }
  .banner-information .banner-address-time .right {
    font-size: 10px;
    color: #ccc;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotateY(180deg);
  }
  .banner-information .banner-address-time .font-text {
    width: 100%;
    padding: 10px 30px;
    /* background-color: firebrick; */
    box-sizing: border-box;
    
    /* 溢出文字用...显示 */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .banner-border-box {
    position: absolute;
    border-bottom: 1px solid rgb(237, 237, 237);
    width: 90%;
    left: 50%;
    bottom: 0px;
    margin-left: -45%;
  }

  

</style>